Amazon Lex ボットに Web UI を提供する aws-samples/aws-lex-web-ui を試してみた

Amazon Lex ボットを Web ページ上で使用するための仕組みを簡単に実装できる aws-samples/aws-lex-web-ui を試してみました。

#Amazon Lex

#AWS

千葉幸宏（チバユキ）

2022.04.30

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

コンバンハ、千葉（幸）です。

Amazon Lex で作成したボットをウェブサイトと統合する手段について、AWS ドキュメントでいくつか取り上げられています。

ウェブサイトとの統合 - Amazon Lex

一番上のリンクで取り上げられているのは以下 AWS ブログで、そこでは aws-samples/aws-lex-web-ui で提供されている CloudFormation テンプレートをデプロイしています。

どういった使い心地か、最低限 Web UI を試すところまでやってみました。

aws-samples/aws-lex-web-ui で作成される構成

CloudFormation テンプレートによってデプロイされる構成は以下の通りです。（冒頭の AWS ブログより画像引用）

Amazon_WebUI_Architecture

CodeBuild により Web UI の静的ページアーティファクトが生成され、S3 バケットに格納されます。クライアントは S3 バケットに CloudFront 経由でアクセスします。

Amazon Lex へのアクセス権限を付与するための Amazon Cognito リソースも併せてデプロイされます。これにより、任意のユーザーが Amazon Lex ボットの呼び出しが可能になります。

aws-samples/aws-lex-web-ui やってみた

早速やってみます。

aws-lex-web-ui では既存の Amazon Lex ボットを指定することも、テンプレートデプロイ時にサンプルのボットをデプロイすることもできます。

今回は以下のエントリで作成済みの東京リージョンのボットBankingBotを指定します。

CloudFormation テンプレートのデプロイ

冒頭の AWS ブログに CloudFormation スタックの起動ボタンが用意されているため、そこから作成を試みます。使用されたテンプレートは v0.19.4 でした。

指定できるパラメータが数多く用意されているのですが、最低限必要なものとして Lex V2 ボットのボット ID、エイリアスIDを入力しました。（ここを割愛するとサンプルのボットがデプロイされます。）

Amazon_Lex_WebUI

最後の確認項目にチェックを入れ、スタックの作成を押下します。以下のテンプレートがネストされており、順次呼び出されます。

CodeBuildDeploy
CognitoIdentityPool
CognitoIdentityPoolConfig

およそ 10 分ほどですべてのリソースの作成が完了しました。

Web App ページの確認

CloudFormation スタックの出力から、各種 URL が確認できます。まずはWebAppUrlを確認してみます。

ボットとテキストと音声で対話できる Web ページが表示されました。

テンプレートデプロイ時のパラメータを変更していないため、「Order Flowers」というタイトルや最初のテキストがサンプルボットを想定したもののままになっています。

以降のテキストを入力するとテンプレートデプロイ時に指定した Lex ボット BankingBot が呼び出されていることがわかります。

親ページの確認

Amazon Lex ボットとの対話を埋め込みのウィジェットで行うこともできます。埋め込むためのスニペットを確認できる親ページにアクセスしてみます。

CloudFormation スタックの出力からParentPageUrlキーの値にアクセスします。

画面右側にウィジェットが表示されており、そこで入力した内容に応じて呼び出されたインテントやスロットの情報が確認できます。

Chatbot_UI_iFrame_Example

スニペットページの確認

CloudFormation スタックの出力からParentPageUrlキーの値にアクセスします。

以下のようにスニペットや Config の情報が記載されたページが表示されます。

Amazon_Lex_Snipet

スニペットを試してみる

上記で確認したスニペットを埋め込んだ html ファイルを用意しました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>サンプルページ</h1>
    <p>サンプルです。</p>
    <script src="https://xxxxxxxxxxag.cloudfront.net/lex-web-ui-loader.min.js"></script>
    <script>
    var loaderOpts = {
        baseUrl: 'https://xxxxxxxxxxag.cloudfront.net/',
        shouldLoadMinDeps: true
    };
    var loader = new ChatBotUiLoader.IframeLoader(loaderOpts);
    var chatbotUiConfig = {
            /* Example of setting session attributes on parent page
            lex: {
                sessionAttributes: {
                userAgent: navigator.userAgent,
                QNAClientFilter: ''
                }
            }
            */
            };
    loader.load(chatbotUiConfig)
        .catch(function (error) { console.error(error); });
    </script>
</body>
</html>

（横着してローカルから html ファイルを開いてウィジェットを確認できないかなと思ったのですが、もちろん無理でした。）

Amazon_Lex_WebUI-1321410

Web UI アーティファクトが格納された S3 バケットに作成した html ファイルをアップロードし、CloudFront 経由でアクセスしてみると、ウイジェットが表示される様子を確認できました。

Amazon_Lex_UI

自前の Web サイトにスニペットを使用する場合は、CloudFormation テンプレートデプロイ時のパラメータWebAppParentOriginにオリジンの情報を指定するようにしてください。

コンフィグに手を加えてみる

スニペットページで確認したlex-web-ui-loader-config.jsonを編集し、Web UI をカスタマイズできます。

以下のように、「最初のテキスト」「ツールバーのタイトル」「ツールバーのカラー」に変更を加えてみました。

・・・・・略・・・・・
"lex": {
    "v2BotId": "ZVAMMMXXE1",
    "v2BotAliasId": "TSTALIASID",
    "v2BotLocaleId": "en_US",
    "botName": "ZVAMMMXXE1",
    "botAlias": "$LATEST",
    "initialText": "こんにちは",
    "initialSpeechInstruction": "Say 'Buy Flowers' to get started.",
    "initialUtterance": "",
    "reInitSessionAttributesOnRestart": false,
    "region": "ap-northeast-1",
    "retryOnLexPostTextTimeout": "false",
    "retryCountPostTextTimeout": "1"
  },
  "ui": {
    "parentOrigin": "https://xxxxxxx1ag.cloudfront.net",
    "toolbarTitle": "BankingBot",
    "toolbarColor": "green",
    "toolbarLogo": "",
    "positiveFeedbackIntent": "Thumbs up",
    "negativeFeedbackIntent": "Thumbs down",
    "helpIntent": "Help",
    "enableLogin": false,
    "enableLiveChat": false,
    "forceLogin": false,
    "AllowSuperDangerousHTMLInMessage": true,
    "shouldDisplayResponseCardTitle": false,
    "saveHistory": false,
    "helpContent": {},
    "enableSFX": false,
    "minButtonContent": "",
    "hideInputFieldsForButtonResponse": false,
    "pushInitialTextOnRestart": false,
    "directFocusToBotInput": false,
    "showDialogStateIcon": false,
    "backButton": false,
    "messageMenu": true,
    "hideButtonMessageBubble": false
  },
・・・・・略・・・・・

上記のコンフィグを S3 にアップロードし直し、再度 Web UI にアクセスしてみます。

以下の通り変更が反映されています。これはウィジェットでも Web ページでも同様です。

Amazon_Lex_UI-1322829